<template>
  <div class="box">
    <div ref="show">
      <van-nav-bar title="我的训练" fixed>
        <van-icon
          :name="as"
          slot="left"
          color="black"
          size="40px"
          @click="toat"
          if="flag"
          style="display:block;border-radius:50%;overflow:hidden"
        />
        <van-icon name="map-marked" color="black" size="24px" slot="right" @click="tap()"/>
      </van-nav-bar>
    </div>
    <div class="box2">
      <div style="width:100%;height:30px;margin-top:40px" class="ds">
        <span>
          欢迎:
          <a style="color:red">{{name}}</a>
        </span>
      </div>
      <h2>总训练时长</h2>

      <p @click="top()" class="p1">
        0
        <span>
          lv0
          <van-icon name="arrow" size="20px" slot="right"/>
        </span>
      </p>
      <h2 @click="pm()" class="p2">
        本周好友排名
        <span>
          <van-icon name="manager" slot="left" size="20px"/>
          <van-icon name="arrow" slot="right" size="20px"/>
        </span>
      </h2>
      <h2>我的训练</h2>
  
      <p  class="tu tu1" @click="too()">普拉提线条雕刻初级</p>
      <p  class="tu tu2" @click="too1()">男士增强训练</p>
      <p  class="tu tu3" @click="too2()">健身塑性醒系列</p>
    </div>
    <div class="new">
      <p @click="hxtb()">
        <a>含胸驼背改善练习</a>
        <span>6个动作，循环2次,12分钟</span>
      </p>

      <p @click="xtts()">
        <a>协调性提升练习</a>
        <span>6个动作，循环2次,10分钟</span>
      </p>
      <p @click="zrxl()">
        <a>自然练习</a>
        <span>6个动作，循环2次,9分钟</span>
      </p>
      <p @click="tbsz()">
        <a>十分钟挺拔身姿</a>
        <span>6个动作，循环2次,14分钟</span>
      </p>
      <p @click="szts()">
        <a>上肢力量提升</a>
        <span>6个动作，循环2次,12分钟</span>
      </p>
      <p @click="xzts()">
        <a>下肢力量提升</a>
        <span>6个动作，循环2次,11分钟</span>
      </p>
      <!-- <div style="width:100%;height:20px;background:#fff"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // as:'manager',
      as: this.$store.state.plce,
      name: this.$store.state.name,
      active: 2,
     
      token: this.$store.state.token,
      uid: this.$store.state.uid,
      flag: false
    };
  },
  methods: {
    top() {
      this.$router.push("/mylishi");
      
    },
    tap() {
      this.$router.push("/runing");
    },
    pm() {
      this.$router.push("/friendpm");
    },
    too() {
      this.$router.push("/homexq");
    },
    too1() {
      this.$router.push("/homexqt");
    },
    too2() {
      this.$router.push("/homexqs");
    },
    toat() {
      this.$router.push("/myspeed");
    },
    hxtb() {
      this.$router.push("/hxtb");
    },
    zrxl() {
      this.$router.push("/zrxl");
    },
    tbsz() {
      this.$router.push("/tbsz");
    },
    xtts() {
      this.$router.push("/xtts");
    },
    szts() {
      this.$router.push("/szts");
    },
    xzts() {
      this.$router.push("/xzts");
    }
  },

  mounted() {
    if (!this.$store.state.token) {
      alert("请先登录");
       // this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
/* *{
    margin: 0;
    padding: 0
} */
.box {
  width: 100%;
  overflow: hidden;
  padding: 20px 20px;
  box-sizing: border-box;
  background: #fff;
}
.box2 p {
  font-size: 60px;
  line-height: 80px;
}
.p1 {
  display: flex;
  justify-content: space-between;
  
  font-weight: 800;
}
.p2 {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}

.box2 > p span {
  font-size: 18px;
  font-weight: 100;
}

.box .tu {
  height: 150px;
  border: 1px solid #000;
  font-size: 20px;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
  
}
.box .tu1{
  background:url(../img/2.jpg);
  background-size: cover
}
.box .tu2{
  background:url(../img/1.jpg);
  background-size: cover

}

.box .tu3{
  background:url(../img/3.jpg);
  background-size:cover



}
.new p {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  line-height: 30px;
  font-size: 20px;
}
.new p a {
  /* font-size: 16px; */
  display: block;
  line-height: 20px;
}
.new p span {
  font-size: 14px;
}
</style>
